<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告管理 - 毕业招聘系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .announcement-list { margin-top: 20px; }
        .announcement-item { margin-bottom: 15px; padding: 15px; border-radius: 8px; background-color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .announcement-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
        .announcement-title { font-size: 18px; font-weight: 600; color: var(--primary); }
        .announcement-meta { color: #666; font-size: 14px; }
        .announcement-content { color: #333; line-height: 1.6; margin-bottom: 10px; }
        .announcement-actions { display: flex; gap: 10px; }
        .btn-sm { padding: 6px 12px; font-size: 14px; }
        .modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
        .modal-content { background-color: white; border-radius: 12px; width: 600px; max-width: 90%; padding: 25px; box-shadow: 0 5px 25px rgba(0,0,0,0.15); }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .modal-title { font-size: 20px; font-weight: 600; color: var(--primary); }
        .close-modal { background: none; border: none; font-size: 24px; cursor: pointer; color: #666; }
        .form-group { margin-bottom: 20px; }
        textarea.form-control { min-height: 150px; resize: vertical; }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <div class="nav-container">
            <div class="logo">毕业招聘系统</div>
            <div class="nav-links">
                <a href="admin-dashboard.html" class="nav-btn">管理首页</a>
                <a href="admin-users.html" class="nav-btn">用户管理</a>
                <a href="admin-announcements.html" class="nav-btn active">公告管理</a>
                <a href="#" class="nav-btn" id="logoutBtn"><i class="fas fa-sign-out-alt"></i> 退出</a>
            </div>
        </div>
    </div>

    <div class="container">
        <h1 class="page-title"><i class="fas fa-bullhorn"></i> 公告管理</h1>

        <div class="card">
            <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
                <h2 class="card-title">公告列表</h2>
                <button class="btn btn-primary" id="createAnnouncementBtn"><i class="fas fa-plus"></i> 发布新公告</button>
            </div>
            <div class="card-body">
                <div class="announcement-list" id="announcementList">
                    <!-- 公告列表将通过JavaScript动态加载 -->
                    <div class="loading" style="text-align: center; padding: 40px;">加载中...</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 创建/编辑公告模态框 -->
    <div class="modal" id="announcementModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalTitle">发布新公告</h3>
                <button class="close-modal" id="closeModal">&times;</button>
            </div>
            <form id="announcementForm">
                <input type="hidden" id="announcementId">
                <div class="form-group">
                    <label for="title" class="form-label">公告标题</label>
                    <input type="text" class="form-control" id="title" name="title" required placeholder="请输入公告标题">
                </div>
                <div class="form-group">
                    <label for="content" class="form-label">公告内容</label>
                    <textarea class="form-control" id="content" name="content" required placeholder="请输入公告内容"></textarea>
                </div>
                <div class="form-group">
                    <label for="targetUsers" class="form-label">发送对象</label>
                    <select class="form-control" id="targetUsers" name="targetUsers">
                        <option value="all">所有用户</option>
                        <option value="job_seeker">仅求职者</option>
                        <option value="company">仅企业用户</option>
                    </select>
                </div>
                <div class="form-actions" style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">
                    <button type="button" class="btn btn-secondary" id="cancelBtn">取消</button>
                    <button type="submit" class="btn btn-primary">发布</button>
                </div>
            </form>
        </div>
    </div>

    <script src="js/admin-announcements.js"></script>
</body>
</html>